<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
	<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	<style>
		.layui-elem-quote{
			border-left: 5px solid #1e9fff;
		}
		.layui-form-select dl dd.layui-this {
			background-color: #1e9fff;
			color: #fff;
		}
	</style>
</head>
<body>
<div class="layui-panel" style="padding: 8px;">
	<blockquote class="layui-elem-quote layui-border-blue">商城基本配置</blockquote>
	<div>
		<form class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<label class="layui-form-label">商城名称</label>
				<div class="layui-input-block">
					<input class="layui-input" lay-verify="required" name="mallName" autocomplete="off" th:placeholder="${c.mallName}"/>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">商城地址</label>
					<div class="layui-input-inline" style="min-width:150px;">
						<select class="layui-select" id="province" name="province" lay-filter="province"  lay-verify="required">
							<option th:value="${c.province}" th:text="${c.province}"></option>
						</select>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="min-width:120px;">
						<select class="layui-select" lay-filter="city" id="city" name="city" lay-verify="required">
							<option th:value="${c.city}" th:text="${c.city}"></option>
						</select>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="min-width:120px;">
						<select class="layui-select" id="area" name="area" lay-filter="area" lay-verify="required">
							<option th:value="${c.area}" th:text="${c.area}"></option>
						</select>

					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="min-width:250px;">
						<input class="layui-input" lay-filter="address" id="address" name="address" lay-verify="required" autocomplete="off" th:placeholder="${c.address}" />
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">联系电话</label>
					<div class="layui-input-inline">
						<input class="layui-input" name="mallPhone"  lay-verify="required" autocomplete="off" th:placeholder="${c.mallPhone}" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">联系QQ</label>
					<div class="layui-input-inline">
						<input class="layui-input" name="qq" autocomplete="off" th:placeholder="${c.qq}" />
					</div>

				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">地理坐标</label>
					<div class="layui-input-inline">
						<input class="layui-input" name="lng" autocomplete="off" th:placeholder="${c.lng}" />
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input class="layui-input" name="lat" autocomplete="off" th:placeholder="${c.lat}" />
					</div>
					<div class="layui-input-inline">
						<a class="layui-btn layui-btn-normal" id="openMap">
							<i class="layui-icon layui-icon-about">
								打开地图
							</i>
						</a>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">短信有效时间(秒)</label>
					<div class="layui-input-inline">
						<input type="number" class="layui-input" name="messageEffectiveTime" autocomplete="off" th:placeholder="${c.messageEffectiveTime}" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">邮件有效时间(分)</label>
					<div class="layui-input-inline">
						<input type="number" class="layui-input" name="emailEffectiveTime" autocomplete="off" th:placeholder="${c.emailEffectiveTime}" />
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div style="text-align: center;">
					<a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitBtn">
						<i class="layui-icon layui-icon-ok"></i>
						确定保存
					</a>
					<a class="layui-btn layui-btn-primary" id="cleanBtn">
						<i class="layui-icon layui-icon-fonts-clear"></i>
						清空重置
					</a>
				</div>
			</div>
		</form>
	</div>
</div>
<script>
	var $,form;
	layui.use(['jquery','form','layer'],function(){
		$ = layui.jquery;
		form = layui.form
		var layer = layui.layer;

		findRegion(1,'province','省份',0);
		$('#cleanBtn').on('click',function(){
			$('.layui-form input').val("");
		})

		$('#openMap').on('click',function (){
			var lng = $('input[name="lng"]').val(),
					lat = $('input[name="lat"]').val();

			lng = lng==''?0.0:lng,lat = lat == ''?0.0:lat;
			top.layer.open({
				title:'经纬度选择',
				type:2,
				content:'/page/system/map/'+lng+'/'+lat,
				area:['800px','700px'],
				minMax:true,
				btn:['确定选择','取消关闭'],
				btn1:function (i,o) {
					var point = o.find('iframe')[0].contentWindow.submitBtn();
					$('input[name="lng"]').val(point.lng);
					$('input[name="lat"]').val(point.lat);
				},

			})

		})

		//下拉框监听
		form.on('select(province)',function (data) {
			if (data.value == ''){

			}else {
				findRegion(2,'city','市',data.value);
			}
		})
		form.on('select(city)',function (data) {
			if (data.value == ''){

			}else {
				findRegion(3,'area','区/县',data.value);
			}
		})

		//提交表单
		form.on('submit(submitBtn)',function(data){
			var formData = data.field;
			$.ajax({
				type:'post',
				url: '/system/mcc/update',
				data:formData,
				dataType: 'json',
				success:function (result) {
					layer.msg(result.msg);
				}
			})
		})
	})

	function findRegion(type,name,tip,pid) {

		$.ajax({
			type:'post',
			url:'/system/rc/find',
			data:{
				pid:pid,
				type:type,
				limit:100
			},
			dataType:'json',
			success:function (res) {

				var obj = $('#'+name);
				//清除里面内容
				$(obj).empty().append('<option value="">请选择'+tip+'</option>');

				$.each(res.data,function (i,data) {

					var option = '<option value="'+data.id+'"> '+data.name+'</option>';
					$(obj).append(option);
				})
				form.render('select');//指定表单刷新

			}
		})
	}



</script>
</body>
</html>
